<template>
  <div class="cleanTask">
    <el-button class="themeBtn newTask" size="medium" type="primary" @click="dialogNewShow = true">新建清洗任务</el-button>
    <el-dialog top="10vh" title="新建清洗任务" width="30%" :visible.sync="dialogNewShow" center>
      <el-form :model="formNew" label-position="top">
        <el-form-item label="数据库：">
          <el-select v-model="formNew.dataBase" placeholder="请选择活动区域" style="width: 100%">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户：">
          <el-select v-model="formNew.userName" placeholder="请选择活动区域" style="width: 100%">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="表名称：">
          <el-input v-model="formNew.tabelName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="清洗类型：">
          <el-input v-model="formNew.cleanType" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogNewShow = false">取 消</el-button>
        <el-button class="themeBtn" size="medium" type="primary" @click="newTask">确 定</el-button>
      </div>
    </el-dialog>
    <el-table :data="tableCleanTask" stripe style="width: 100%" header-row-class-name="tableHeader">
      <el-table-column type="index" label="序号" min-width="60"> </el-table-column>
      <el-table-column prop="dataBase" label="数据库" min-width="80"> </el-table-column>
      <el-table-column prop="tableName" label="表名称" min-width="80"> </el-table-column>
      <el-table-column prop="userName" label="用户" min-width="80"> </el-table-column>
      <el-table-column prop="createTime" label="开始时间" width="150"> </el-table-column>
      <el-table-column prop="status" label="清洗状态" width="100">
        <template slot-scope="scope">
          <p>{{ scope.row.status }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" width="650">
        <template slot-scope="scope">
          <el-button class="underlineBtn" @click="dialogCheckShow = true" type="text">一致性检查</el-button>
          <el-button class="underlineBtn" @click="dialogMappingShow = true" type="text">无效值/缺失值处理值映射</el-button>
          <el-button class="underlineBtn" @click="dialogOffRepeatShow = true" type="text">去重</el-button>
          <el-button class="underlineBtn" @click="dialogAddOrderShow = true" type="text">增加序列</el-button>
          <el-button class="underlineBtn" @click="dialogStrSubShow = true" type="text">字符串替换</el-button>
          <el-button class="underlineBtn" @click="dialogSplitFieldShow = true" type="text">拆分字段</el-button>
          <el-button class="underlineBtn" @click="dialogRecordTieShow = true" type="text">笛卡尔记录关联</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="pageDom" background :page-sizes="[100, 200, 300, 400]"
      layout="total, prev, pager, next, sizes, jumper" :total="1000" style="text-align: center">
    </el-pagination>
    <el-dialog top="10vh" title="一致性检查" width="30%" :visible.sync="dialogCheckShow" center>
      <el-form :model="formCheck" label-position="top">
        <el-form-item label="字段名称：">
          <el-select v-model="formCheck.region" placeholder="请选择活动区域" style="width: 100%">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字段名称：">
          <el-select v-model="formCheck.region" placeholder="请选择活动区域" style="width: 100%">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogCheckShow = false">取 消</el-button>
        <el-button class="themeBtn" size="medium" type="primary" @click="Check">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog top="10vh" class="grayDialogBody" title="一致性检查结果" :visible.sync="dialogCheckResultShow" center>
      <div class="whiteBox">
        <div class="beforeBlueLabel">表名称</div>
        <el-table :data="tableCheck" stripe style="width: 100%" header-row-class-name="tableHeader">
          <el-table-column type="index" label="序号" min-width="60"> </el-table-column>
          <el-table-column prop="date" label="数据库" min-width="80"> </el-table-column>
          <el-table-column prop="name" label="表名称" min-width="80"> </el-table-column>
          <el-table-column prop="address" label="用户" min-width="80"> </el-table-column>
          <el-table-column prop="time" label="开始时间" width="150"> </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogCheckResultShow = false">取 消</el-button>
        <el-button class="themeBtn" size="medium" type="primary" @click="dialogCheckResultShow = false">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog top="10vh" title="无效值/缺失值处理映射" width="30%" :visible.sync="dialogMappingShow" center>
      <el-form :model="formMapping" label-position="top">
        <el-form-item label="使用的字段名（要映射的字段）：">
          <el-select v-model="formMapping.region" placeholder="请选择活动区域" style="width: 100%">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目标字段名（映射的字段名）：">
          <el-input v-model="formMapping.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="不匹配时的默认值：">
          <el-input v-model="formMapping.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogMappingShow = false">取 消</el-button>
        <el-button class="themeBtn" size="medium" type="primary" @click="Mapping">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog top="10vh" class="grayDialogBody" title="无效值/缺失值处理映射结果" :visible.sync="dialogMappingResultShow" center>
      <div class="whiteBox">
        <el-table :data="tableMapping" stripe style="width: 100%" header-row-class-name="tableHeader">
          <el-table-column type="index" label="序号" min-width="60"> </el-table-column>
          <el-table-column prop="date" label="数据库" min-width="80"> </el-table-column>
          <el-table-column prop="name" label="表名称" min-width="80"> </el-table-column>
          <el-table-column prop="address" label="用户" min-width="80"> </el-table-column>
          <el-table-column prop="time" label="开始时间" width="150"> </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogMappingResultShow = false">取 消</el-button>
        <el-button class="themeBtn" size="medium" type="primary" @click="dialogMappingResultShow = false">确
          定</el-button>
      </div>
    </el-dialog>
    <el-dialog top="10vh" title="去重" width="30%" :visible.sync="dialogOffRepeatShow" center>
      <el-form :model="formOffRepeat" label-position="top">
        <el-form-item label="活动区域">
          <el-select v-model="formOffRepeat.region" placeholder="请选择活动区域" style="width: 100%">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动区域" style="margin-bottom: 0;">
          <el-radio-group v-model="formOffRepeat.resource">
            <el-radio label="所有字段都重复"></el-radio>
            <el-radio label="以下字段都重复"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-show="formOffRepeat.resource === '以下字段都重复'">
          <el-select v-model="formOffRepeat.value" multiple filterable allow-create default-first-option
            placeholder="请选择文章标签" style="width: 100%;">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogOffRepeatShow = false">取 消</el-button>
        <el-button class="themeBtn" size="medium" type="primary" @click="OffRepeat">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog top="10vh" class="grayDialogBody" title="去重结果" :visible.sync="dialogOffRepeatResultShow" center>
      <div class="whiteBox">
        <div style="font-weight: blod;">xxx条数据表</div>
        <div class="orderInfoBox">
          <div class="infoHeader">结果详情</div>
          <p>创建时间：XXXXXXXX</p>
          <p>更新时间：XXXXXXXX</p>
          <p>数据描述：XXXXXXXX</p>
        </div>
        <div class="beforeBlueLabel">去重结果数据</div>
        <el-table :data="tableOffRepeat" stripe style="width: 100%" header-row-class-name="tableHeader">
          <el-table-column type="index" label="序号" min-width="60"> </el-table-column>
          <el-table-column prop="date" label="数据库" min-width="80"> </el-table-column>
          <el-table-column prop="name" label="表名称" min-width="80"> </el-table-column>
          <el-table-column prop="address" label="用户" min-width="80"> </el-table-column>
          <el-table-column prop="time" label="开始时间" width="150"> </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogOffRepeatResultShow = false">取 消</el-button>
        <el-button class="themeBtn" size="medium" type="primary" @click="dialogOffRepeatResultShow = false">确
          定</el-button>
      </div>
    </el-dialog>
    <el-dialog top="10vh" title="增加序列" width="30%" :visible.sync="dialogAddOrderShow" center>
      <el-form :model="formAddOrder" label-position="top">
        <div style="font-weight: blod;">值的名称：K</div>
        <div class="orderInfoBox">
          <div class="infoHeader">使用数据库生成序列（从数据库中读取数列）</div>
          <p>数据库连接：XXXXXXXX</p>
          <p>模式名称：XXXXXXXX</p>
          <p>字段名称：XXXXXXXX</p>
        </div>
        <div class="beforeBlueLabel">使用转换计数器来生成序列（追加数字序列）</div>
        <el-form-item label="活动区域">
          <el-select v-model="formAddOrder.region" placeholder="请选择活动区域" style="width: 100%">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="formAddOrder.region" placeholder="请选择活动区域" style="width: 100%">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="formAddOrder.region" placeholder="请选择活动区域" style="width: 100%">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="formAddOrder.region" placeholder="请选择活动区域" style="width: 100%">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogAddOrderShow = false">取 消</el-button>
        <el-button class="themeBtn" size="medium" type="primary" @click="dialogAddOrderShow = false">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog top="10vh" class="grayDialogBody" title="字符串替换" :visible.sync="dialogStrSubShow" center>
      <div class="whiteBox" style="margin-bottom: 10px;">
        <el-form :model="formStrSub" label-position="top" style="display: flex;justify-content: space-between;">
          <el-form-item label="待查找或替换前的字符串：" style="width: 45%;">
            <el-input v-model="formStrSub.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="替换后的字符串：" style="width: 45%;">
            <el-input v-model="formStrSub.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div style="text-align: center;">
          <el-button size="medium" @click="dialogStrSubShow = false">取 消</el-button>
          <el-button class="themeBtn" size="medium" type="primary" @click="StrSub">确 定</el-button>
        </div>
      </div>
      <div class="whiteBox">
        <div class="beforeBlueLabel">符合替换数据列表</div>
        <el-table :data="tableStrSub" stripe style="width: 100%" header-row-class-name="tableHeader">
          <el-table-column type="index" label="序号" min-width="60"> </el-table-column>
          <el-table-column prop="date" label="数据库" min-width="80"> </el-table-column>
          <el-table-column prop="name" label="表名称" min-width="80"> </el-table-column>
          <el-table-column prop="address" label="用户" min-width="80"> </el-table-column>
          <el-table-column prop="time" label="开始时间" width="150"> </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogStrSubShow = false">取 消</el-button>
        <el-button class="themeBtn" size="medium" type="primary" @click="StrSub">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog top="10vh" class="grayDialogBody" title="字符串替换结果" :visible.sync="dialogStrSubResultShow" center>
      <div class="whiteBox">
        <el-table :data="tableStrSubResult" stripe style="width: 100%" header-row-class-name="tableHeader">
          <el-table-column type="index" label="序号" min-width="60"> </el-table-column>
          <el-table-column prop="date" label="数据库" min-width="80"> </el-table-column>
          <el-table-column prop="name" label="表名称" min-width="80"> </el-table-column>
          <el-table-column prop="address" label="用户" min-width="80"> </el-table-column>
          <el-table-column prop="time" label="开始时间" width="150"> </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogStrSubResultShow = false">取 消</el-button>
        <el-button class="themeBtn" size="medium" type="primary" @click="dialogStrSubResultShow = false">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog top="10vh" title="拆分字段" width="30%" :visible.sync="dialogSplitFieldShow" center>
      <el-form :model="formSplitField" label-position="top">
        <el-form-item label="需要拆分的字段：">
          <el-select v-model="formSplitField.region" placeholder="请选择活动区域" style="width: 100%">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分隔符：">
          <el-input v-model="formSplitField.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogSplitFieldShow = false">取 消</el-button>
        <el-button class="themeBtn" size="medium" type="primary" @click="SplitField">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog top="10vh" class="grayDialogBody" title="拆分字段结果" :visible.sync="dialogSplitFieldResultShow" center>
      <div class="whiteBox">
        <el-table :data="tableSplitField" stripe style="width: 100%" header-row-class-name="tableHeader">
          <el-table-column type="index" label="序号" min-width="60"> </el-table-column>
          <el-table-column prop="date" label="数据库" min-width="80"> </el-table-column>
          <el-table-column prop="name" label="表名称" min-width="80"> </el-table-column>
          <el-table-column prop="address" label="用户" min-width="80"> </el-table-column>
          <el-table-column prop="time" label="开始时间" width="150"> </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogSplitFieldResultShow = false">取 消</el-button>
        <el-button class="themeBtn" size="medium" type="primary"
          @click="dialogSplitFieldResultShow = false">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog top="10vh" title="笛卡尔记录关联" width="30%" :visible.sync="dialogRecordTieShow" center>
      <el-form :model="formRecordTie" label-position="top">
        <el-form-item label="数据表1">
          <el-select v-model="formRecordTie.region" placeholder="请选择活动区域" style="width: 100%">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据表2">
          <el-select v-model="formRecordTie.region" placeholder="请选择活动区域" style="width: 100%">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogRecordTieShow = false">取 消</el-button>
        <el-button class="themeBtn" size="medium" type="primary" @click="RecordTie">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog top="10vh" class="grayDialogBody" title="笛卡尔记录关联结果" :visible.sync="dialogRecordTieResultShow" center>
      <div class="whiteBox">
        <el-table :data="tableRecordTie" stripe style="width: 100%" header-row-class-name="tableHeader">
          <el-table-column type="index" label="序号" min-width="60"> </el-table-column>
          <el-table-column prop="date" label="数据库" min-width="80"> </el-table-column>
          <el-table-column prop="name" label="表名称" min-width="80"> </el-table-column>
          <el-table-column prop="address" label="用户" min-width="80"> </el-table-column>
          <el-table-column prop="time" label="开始时间" width="150"> </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogRecordTieResultShow = false">取 消</el-button>
        <el-button class="themeBtn" size="medium" type="primary" @click="dialogRecordTieResultShow = false">确
          定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "CleanTask",
  data() {
    return {
      options: [{
        value: 'HTML',
        label: 'HTML'
      }, {
        value: 'CSS',
        label: 'CSS'
      }, {
        value: 'JavaScript',
        label: 'JavaScript'
      }],
      value: [],
      tableCleanTask: [],
      tableCheck: [
        {
          date: "2016-05-03",
          name: "王小虎",
          status: "清洗完成",
          time: "2023-08-23 12:00",
          address: "上海1516 弄",
        },
      ],
      tableMapping: [
        {
          date: "2016-05-02",
          name: "王小虎",
          status: "清洗完成",
          time: "2023-08-23 12:00",
          address: "上海1518 弄",
        },
      ],
      tableOffRepeat: [
        {
          date: "2016-05-02",
          name: "王小虎",
          status: "清洗完成",
          time: "2023-08-23 12:00",
          address: "上海1518 弄",
        },
      ],
      tableStrSub: [
        {
          date: "2016-05-02",
          name: "王小虎",
          status: "清洗完成",
          time: "2023-08-23 12:00",
          address: "上海1518 弄",
        },
      ],
      tableStrSubResult: [
        {
          date: "2016-05-02",
          name: "王小虎",
          status: "清洗完成",
          time: "2023-08-23 12:00",
          address: "上海1518 弄",
        },
      ],
      tableSplitField: [
        {
          date: "2016-05-02",
          name: "王小虎",
          status: "清洗完成",
          time: "2023-08-23 12:00",
          address: "上海1518 弄",
        },
      ],
      tableRecordTie: [
        {
          date: "2016-05-02",
          name: "王小虎",
          status: "清洗完成",
          time: "2023-08-23 12:00",
          address: "上海1518 弄",
        },
      ],
      dialogNewShow: false,
      dialogCheckShow: false,
      dialogCheckResultShow: false,
      dialogOffRepeatShow: false,
      dialogOffRepeatResultShow: false,
      dialogAddOrderShow: false,
      dialogStrSubShow: false,
      dialogStrSubResultShow: false,
      dialogSplitFieldShow: false,
      dialogSplitFieldResultShow: false,
      dialogRecordTieShow: false,
      dialogRecordTieResultShow: false,
      dialogMappingShow: false,
      dialogMappingResultShow: false,
      formNew: {
        dataBase: '',
        userName: '',
        tabelName: '',
        cleanType: '',
      },
      formCheck: {},
      formMapping: {},
      formOffRepeat: {
        resource: 0
      },
      formAddOrder: {},
      formStrSub: {},
      formSplitField: {},
      formRecordTie: {},
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    this.getTaskList();
    this.getDataSource();
  },
  methods: {
    getTaskList() {
      this.$axios({
        method: "get",
        url: "dataCleaning/expert/allCleanTask",
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.tableCleanTask = res.data.data.map(e => {
              return {
                createTime: e.createTime,
                dataBase: e.dataBase,
                tableName: e.tableName,
                taskId: e.taskId,
                userName: e.userName
              }
            })
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getDataSource() {
      this.$axios({
        method: "get",
        url: "dataCleaning/expert/getAllDataSource",
      })
        .then((res) => {
          if (res.data.code == 200) {
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    newTask() {
      this.$axios({
        method: "post",
        url: "dataCleaning/expert/createCleanTask",
        data: this.formNew,
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: '提交成功',
              type: 'success'
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    Check() {
      this.dialogCheckShow = false;
      this.dialogCheckResultShow = true;
    },
    Mapping() {
      this.dialogMappingShow = false;
      this.dialogMappingResultShow = true;
    },
    OffRepeat() {
      this.dialogOffRepeatShow = false;
      this.dialogOffRepeatResultShow = true;
    },
    StrSub() {
      this.dialogStrSubShow = false;
      this.dialogStrSubResultShow = true;
    },
    SplitField() {
      this.dialogSplitFieldShow = false;
      this.dialogSplitFieldResultShow = true;
    },
    RecordTie() {
      this.dialogRecordTieShow = false;
      this.dialogRecordTieResultShow = true;
    },
  },
};
</script>
<style lang="less" scoped>
.themeBtn.el-button:focus,
.themeBtn.el-button:hover {
  background: #7084be;
  border-color: #7084be;
  color: #fff;
}

.themeBtn.el-button--primary {
  color: #fff;
  background-color: #4c65ae;
  border-color: #4c65ae;
}

/deep/ .el-dialog .el-dialog__header {
  text-align: left;
  font-weight: bold;
}

/deep/ .el-table .tableHeader th.el-table__cell {
  background-color: #f2f5f8;
  height: 80px;
}

/deep/ .el-form-item__label {
  line-height: 16px;
  font-weight: bold;
}

/deep/ .grayDialogBody .el-dialog__body {
  background-color: #f1f1f1;

  .whiteBox {
    padding: 20px;
    background-color: #fff;
  }
}

.beforeBlueLabel {
  padding-left: 15px;
  font-weight: bold;
  position: relative;
  margin-bottom: 15px;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    height: 100%;
    width: 5px;
    background-color: #4c65ae;
  }
}

.orderInfoBox {
  border: 1px solid #eee;
  box-sizing: border-box;
  padding: 60px 20px 10px;
  width: 100%;
  margin: 15px 0 15px;
  position: relative;

  .infoHeader {
    position: absolute;
    box-sizing: border-box;
    top: 0;
    left: 0;
    width: 100%;
    line-height: 50px;
    height: 50px;
    background-color: #f2f5f8;
    padding-left: 25px;

    &::before {
      content: '';
      position: absolute;
      left: 10px;
      top: 15px;
      height: 20px;
      width: 5px;
      background-color: #4c65ae;
    }
  }
}

.cleanTask {
  border: 1px solid black;
  background-color: #fff;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  padding-top: 70px;
  position: relative;

  .newTask {
    position: absolute;
    left: 20px;
    top: 20px;
  }

  .pageDom {
    margin-top: 10px;
  }

  .underlineBtn {
    text-decoration: underline;
  }
}
</style>
